<template>
  <div class="account-center-wrap">
    <van-sticky>
      <div class="top-tab">
        <van-tabs
          v-model="active"
          animated
          class="account-tab-title"
          title-active-color="#4197F5"
          :line-width="`${(100/ dataOption.tabList.length)}%`"
        >
          <van-tab
            v-for="(item,index) in dataOption.tabList"
            :title="item.name"
            :key="index"
            :to="item.path"
            :name="item.index"
          ></van-tab>
        </van-tabs>
      </div>
    </van-sticky>
    <div class="account-content">
      <transition :name="direction">
        >
        <router-view class="appView"></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, Sticky } from "vant";
export default {
  name: "accountCenter",
  components: {
    vanTabs: Tabs,
    vanTab: Tab,
    vanSticky: Sticky,
  },
  data() {
    return {
      direction: "slide-right",
      active: "",
      dataOption: {
        tabList: [
          {
            name: "我的账户",
            index: 1,
            path: "/myAcccount",
          },
          {
            name: "转让记录",
            index: 2,
            path: "/transRecord",
          },
          {
            name: "提现",
            index: 3,
            path: "/widthDraw",
          },
        ],
      },
    };
  },
  watch: {
    $route(to, from) {
      let toIndex = this.dataOption.tabList.filter((e) => {
        return e.path == to.path;
      })[0].index;
      let fromIndex = this.dataOption.tabList.filter((e) => {
        return e.path == from.path;
      })[0].index;
      this.direction = toIndex < fromIndex ? "slide-right" : "slide-left";

      this.setActiveTab(to.path);
    },
  },
  created() {
    this.setActiveTab(this.$route.path);
  },
  mounted() {},
  methods: {
    setActiveTab(path) {
      this.active = this.dataOption.tabList.filter((e) => {
        return e.path == this.$route.path;
      })[0].index;
    },
  },
};
</script>

<style lang="less" scoped>
.account-center-wrap {
  background: #fbfcff;
  height: 100%;
  overflow: auto;
  position: relative;
}
.account-center-wrap /deep/ .van-tabs__line {
  background: linear-gradient(
    90deg,
    rgba(118, 200, 251, 1) 0%,
    rgba(65, 151, 245, 1) 100%
  );
  border-radius: 2px;
}
.account-tab-title {
  background: #fff;
}
.account-tab-title /deep/ .van-tab__text {
  font-size: 16px;
}
.account-tab-title /deep/ .van-tabs__wrap {
  height: 50px;
  line-height: 50px;
}
.account-content {
  margin-top: 28px;
  height: calc(100% - 80px);
}

.appView {
  position: absolute;
  width: 100%;
  transition: transform 0.2s ease-in;
}
.slide-left-enter {
  transform: translate(100%, 0);
}
.slide-left-leave-active {
  transform: translate(-50%, 0);
}
.slide-right-enter {
  transform: translate(-50%, 0);
}
.slide-right-leave-active {
  transform: translate(100%, 0);
}
</style>
